<template>
  <div>
    <h3>Item组件</h3>
    <p v-if="id === '001'">CS简介</p>
    <p v-if="id === '002'">DNF简介</p>
    <p v-if="id === '003'">LOL简介</p>
    <div>id:{{id}}--title:{{title}}--age:{{age}}--a:{{a}}</div>

  </div>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      paramsId:""
    }
  },
  props:["id","title","age","a"],
  mounted() {
    console.log(this);
  },
    //组件内进入时守卫(在这里没有this,因为组件实例还没有创建)
  //组件内进入时守卫的next方法可以接收一个回调函数作为参数，回调函数内部可以通过第一个参数可以拿到组件实例
  beforeRouteEnter(to, from, next) {
    console.log("组件内进入时守卫", this);
    next((vm) => {
      console.log("next中的this", vm);
    });
  },

  //组件内更新时守卫(只有当前路由的params动态参数发生改变的时候会触发,并且不会再触发当前路由的独享守卫和组件进入时守卫)
  beforeRouteUpdate(to, from, next) {
    console.log("组件内更新时守卫");
    next();
  },

  //组件内离开时守卫(只有离开执行了,才能执行其他路由的前置守卫)
  beforeRouteLeave(to, from, next) {
    console.log("组件内离开时守卫");
    next();
  },
};
</script>

<style></style>
